<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>15_ES13-class中的新成员</title>
  <!-- 
  在 JavaScript 的 ES13（ECMAScript 2022）中，类（class）相关的语法得到了增强，主要引入了两个新特性：类的私有实例字段和私有方法的声明，以及类的静态类字段和方法。这些新特性使得类的定义和使用更加灵活和强大。
  一、私有实例字段和私有方法
   1. 定义
  私有实例字段和私有方法是以  `#`  开头的属性和方法，只能在类的内部访问，无法在类的外部访问。

   2. 示例
  class Person {
      // 定义私有字段
      #name;
      #age;

      constructor(name, age) {
          this.#name = name; // 访问私有字段
          this.#age = age;   // 访问私有字段
      }

      // 定义私有方法
      #getDetails() {
          return `${this.#name}, ${this.#age}岁`;
      }

      publicMethod() {
          return this.#getDetails(); // 访问私有方法
      }
  }

  const person = new Person('小明', 25);
  console.log(person.publicMethod()); // 输出: 小明, 25岁
  // console.log(person.#name); // 报错: SyntaxError: Private field '#name' must be declared in an enclosing class
  在这个例子中， `#name`  和  `#age`  是私有字段， `#getDetails`  是私有方法。它们只能在  `Person`  类的内部访问。

  二、静态类字段和方法
   1. 定义
  静态字段和方法是属于类本身而不是类的实例，可以通过类直接访问。

   2. 示例
  class MathUtil {
      static PI = 3.14; // 静态字段

      static areaOfCircle(radius) { // 静态方法
          return this.PI * radius * radius;
      }
  }

  console.log(MathUtil.PI); // 输出: 3.14
  console.log(MathUtil.areaOfCircle(5)); // 输出: 78.5
  在这个例子中， `PI`  是一个静态字段， `areaOfCircle`  是一个静态方法。它们可以通过  `MathUtil`  类直接访问，而不需要实例化对象。

  三、总结
  - 私有实例字段和方法：以  `#`  开头的字段和方法只能在类内部访问，增强了数据的封装性和安全性。
  - 静态类字段和方法：属于类本身的字段和方法，可以直接通过类访问，适用于与类相关的功能。
  -->
</head>
<body>

  <script>
    // 1. 私有属性
    class Person {
      // 公有属性
      name;
      age;
      // 私有属性
      #gender;
      // 2.类属性(static)
      // 类属性: public
      static totalCount = "70亿"

      // 类属性: private
      static #maleTotalCount = "20亿"
      
      // 构造方法
      constructor(name, age, gender) {
        this.name = name;
        this.age = age;
        this.#gender = gender;
      }
      
      // 公有方法
      say() {
        console.log(this.#gender);
        return this.#gender
      }
    }
    const p = new Person('张三', 18, '男');
    console.log(p.name);
    console.log(p.gender); // 私有属性无法访问 undefined
    console.log(p.say());
    console.log(Person.totalCount);
    
    

  </script>
  
</body>
</html>